<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        div {
            width: 80px;
        }


        input[type="text"] {
            width: 50px;
            height: 44px;
            outline: none;
            border: 1px solid #ccc;
            text-align: center;
            border-right: 0;
        }


        input[type="button"] {
            height: 24px;
            width: 22px;
            cursor: pointer;
        }


        input {
            float: left;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" id="total" value="0" readonly />
        <input type="button" value="+" id="add" />
        <input type="button" value="-" id="reduce" disabled />
    </div>
    <script>
        // 获取dom标签元素
        const total = document.querySelector('#total');
        const add = document.querySelector('#add');
        const reduce = document.querySelector('#reduce');

        // 为增加按钮创建点击事件
        add.addEventListener('click', function (e) {
            total.value++;
            if (total.value > 1) {
                // 解除禁用状态
                reduce.disabled = false;
            };
        });
        // 为减少按钮创建点击事件
        reduce.addEventListener('click', function (e) {
            total.value--;
            if (total.value <= 0) {
                // 开启禁用状态
                this.disabled = true;
            };
        });
    </script>
</body>

</html>